<!DOCTYPE html>
<html>
  <head>
    <title>Filling with Gradients</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      context.fillStyle    = 'blue'
      context.strokeStyle  = 'green'

      context.fillRect(  20, 20, 600, 200)
      context.clearRect( 40, 40, 560, 160)
      context.strokeRect(60, 60, 520, 120)
 
      gradient = context.createLinearGradient(0, 80, 640,80)
      gradient.addColorStop(0, 'white')
      gradient.addColorStop(1, 'black')
      context.fillStyle = gradient
      context.fillRect(80, 80, 480,80)
    </script>
  </body>
</html>
